import "@libs/svg.js-3.2.0/build/polyfillsIE.js";
import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";

window.addEventListener("load", () => {
    const input = document.querySelector('input[type=text]')
    const draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
    const text = draw.text(function (add) {
        add.tspan(input.value)
    })

    const textPath = text.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')

    textPath.animate(1000).ease('<>')
        .plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
        .loop(true, true)


    const updateText = (textPath) => (() => { textPath.tspan(this.value); })
    input.addEventListener('keyup', updateText(textPath))
})